<template>
    <div class="_main">
        <div class="top">
            <span><b>咨询师姓名</b></span>
            <input type="text" placeholder="请输入咨询师姓名" v-model="queryInfo.name" />
            <el-form-item>
                <el-select v-model="queryInfo.levelId" placeholder="选择等级" style="margin-left: 30px; width: 100px;">
                    <el-option label="全部" value="0" />
                    <el-option label="一级" value="1" />
                    <el-option label="二级" value="2" />
                    <el-option label="三级" value="3" />
                </el-select>
            </el-form-item>
            <div style="background-color: #3E9AF9;border: solid 1px #3E9AF9;cursor: pointer;" @click="getList">
                <el-icon>
                    <Search />
                </el-icon>
                <button class="but1">搜索</button>
            </div>
            <div style="background-color: white;color: #000;border: solid 1px black;cursor: pointer;" @click="reset">
                <el-icon>
                    <Refresh />
                </el-icon>
                <button class="but2">重置</button>
            </div>
        </div>
        <div class="top2">
            <el-button type="primary" icon="Plus" @click="add" plain>新增</el-button>
            <el-button type="primary" icon="Sort" @click="shrink" blue>展开/折叠</el-button>
        </div>
        <div class="table1" style="width: 100%">
            <el-container>
                <el-main>
                    <el-table :data="tableData" :style="{ height: num + 'px' }">
                        <el-table-column label="序号" width="100">
                            <template #default="{ $index }">
                                {{ $index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="咨询师姓名" width="100" />
                        <el-table-column prop="id" label="证书名" width="100" >
                            <template #default="scope">
                                {{ contiList[scope.row.id].certiName }}   
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="证书照片" width="200">
                            <template #default="scope">
                                <!-- {{ contiList[scope.row.id].certiImg }} -->
                                <el-image  v-if="contiList[scope.row.id].certiImg" :src="url + contiList[scope.row.id].certiImg" alt="" style="width: 150px; height: 150px;"/>
                            </template>
                        </el-table-column>  
                        <el-table-column fixed="right" prop="action"
                            label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作" width="150">
                            <template #default="scope">
                                <el-button link type="primary" size="small" @click="modify(scope.row)">
                                    <el-icon>
                                        <EditPen />
                                    </el-icon>
                                    <span>修改</span>
                                </el-button>
                                <el-button link type="primary" size="small" @click="deletes(scope.row.id)">
                                    <el-icon>
                                        <DeleteFilled />
                                    </el-icon>
                                    <span>删除</span>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="fenye">
                        <el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
                            :page-sizes="[1, 10, 50, 100]" size="default" background="false"
                            layout="total, sizes, prev, pager, next, jumper" :total="total"
                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                    </div>
                    <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
                        <el-form :model="consult">
                            <el-form-item label="咨询师名字" :label-width="formLabelWidth">
                                <el-input v-model="consult.name" autocomplete="off" />
                            </el-form-item>       
                        </el-form>
                        <template #footer>
                            <div class="dialog-footer">
                                <el-button @click="close">取消</el-button>
                                <el-button type="primary" @click="saveOrUpdate">
                                    确定
                                </el-button>
                            </div>
                        </template>
                    </el-dialog>
                </el-main>
            </el-container>
        </div>
    </div>
</template>
<script setup>
import axios from 'axios';
import { ElMessageBox, ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue'
const total = ref(0)
const saveOrUpdateVisible = ref(false);
const num = ref(540);
const shrink = () => {
    if (num.value == 540) {
        num.value = 40
    } else {
        num.value = 540
    }
}
const consult = ref({
    id: 0,
    name: '',
    sex: '',
    levelId: 0,
    img: '',
    address: '',
    intro: '',
    authentication: 0,
    consultconti: {
        certiImg: ''
    }
})

const saveOrUpdateTitle = ref('添加咨询师信息');
const modify = row => {
    saveOrUpdateVisible.value = true;
    saveOrUpdateTitle.value = '修改咨询师信息';
    consult.value = row;
    fileList.value = [{
        name: consult.value.img,
        url: url.value + consult.value.img,
    }];
}
const add = () => {
    saveOrUpdateVisible.value = true;
    fileList.value = [];
    saveOrUpdateTitle.value = '添加咨询师信息';
    consult.value = {
        id: 0,
        name: '',
        sex: '',
        levelId: 0,
        img: '',
        address: '',
        intro: '',
        authentication: 0,
    }
}
const close = () => {
    saveOrUpdateVisible.value = false;
    imageUrls.value = '';
    fileList.value = [];
    consult.value = {
        id: 0,
        name: '',
        sex: '',
        levelId: 0,
        img: '',
        address: '',
        intro: '',
        authentication: 0,
    }
}
const saveOrUpdate = () => {
    saveOrUpdateVisible.value = false;
    imageUrls.value = '';
    fileList.value = [];
    if (saveOrUpdateTitle.value == '添加咨询师信息') {
        axios.post('/consult/add', consult.value)
            .then(response => {
                let result = response.data;
                if (result.code == 1) {
                    getConti();
                    getList();
                    ElMessage({
                        message: '添加成功！',
                        type: 'success',
                    })
                } else {
                    ElMessage({
                        message: '添加失败！',
                        type: 'warning',
                    })
                }
            })
    } else {
        axios.put('/consult/update', consult.value)
            .then(response => {
                let result = response.data;
                if (result.code == 1) {
                    getConti();
                    getList();
                    ElMessage({
                        message: '修改成功！',
                        type: 'success',
                    })
                } else {
                    ElMessage({
                        message: '修改失败！',
                        type: 'warning',
                    })
                }
            })
    }
    consult.value = {
        id: 0,
        name: '',
        sex: '',
        levelId: 0,
        img: '',
        address: '',
        intro: '',
        authentication: 0,
    }
}
const reset = () => {
    queryInfo.value = {
        pageNum: 1,
        pageSize: 10,
        name: '',
        authentication: 0
    }
    getConti();
    getList();
}
const fileList = ref([]);
const imageUrls = ref('');
const handleAvatarSuccess = (response,
    uploadFile) => {
    imageUrls.value = URL.createObjectURL(uploadFile.raw);
    consult.value.img = response.data;
}
const deletes = id => {
    ElMessageBox.confirm(
        '是否确认删除这条数据？',
        '系统提示',
        {
            cancelButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.delete('/consult/' + id)
                .then(response => {
                    let result = response.data;
                    if (result.code == 1) {
                        getConti();
                        getList();
                        ElMessage({
                            message: '删除成功！',
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: '删除失败！',
                            type: 'warning',
                        })
                    }
                })
        })
        .catch(() => { })
}
const url = ref('http://localhost/file/downLoad?fileName=')
const handleSizeChange = (val) => {
    queryInfo.value.pageSize = val;
    queryInfo.value.pageNum = 1;
    getConti();
    getList();
}
const handleCurrentChange = (val) => {
    queryInfo.value.pageNum = val;
    getConti();
    getList();
}
const queryInfo = ref({
    pageNum: 1,
    pageSize: 5,
    name: '',
    levelId: 0,
})
onMounted(() => {
    // console.log('onMounted');
    getConti();
    getList();    
})
const tableData = ref([])
const getList = () => {
    axios.get('/consult/findAll', {
        params: queryInfo.value
    })
    .then(response => {
        let result = response.data;
        if (result.code == 1) {
            total.value = result.data.total;
            tableData.value = result.data.list; 
            //console.log(tableData.value); 
        } else {
            console.log(error);
        }
    })
}

const contiList = ref([]);

const getConti = () => {
    axios.get('/consultconti/selectAll') 
       .then(response => {
            let result = response.data;
            //console.log(result.data.length);
           if(result.code == 1){
            for(let i=0;i<result.data.length;i++){
               contiList.value[result.data[i].conId] = result.data[i]  
                } 
           }
           console.log(contiList.value);
           
       })
}
</script>
<style scoped>
._main {
    height: 690px;
    position: relative;
    top: -20px;
    left: -20px;
}

.top {
    width: 700px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top>input {
    width: 160px;
    height: 25px;
    border: solid 1px #E6E8ED;
    border-radius: 5px;
    outline-color: #1890FF;
}

select {
    width: 150px;
    height: 28px;
    border: solid 1px #E6E8ED;
    border-radius: 5px;
    outline-color: #1890FF;
}

.top>div {
    background-color: blue;
    height: 25px;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 5px;
}

button {
    border: none;
}

.but1 {
    color: white;
    background-color: #3E9AF9;
}

.but2 {
    color: black;
    background-color: white;
}

.top2 {
    width: 220px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 30px;
}

.table1 {
    position: absolute;
    top: 90px;
}

hr {
    padding: 5px;
    border: none;
}

.fenye {
    position: absolute;
    top: 600px;
    left: 320px;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>